<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>注册</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<link rel="stylesheet" href="__HOME__/css/layer.css">
<style>
	html,body{width:100%;height:100%;}

	/*-- 顶部头像 --*/
	.ding_bgimg{position:relative;}
	.ding_bgimg>img{width:100%;}
	.ding_bgimg>div{
		border:4px solid #99b2e9;height:68px;width:68px;position:absolute;
		left:calc(50% - 36px);top:30px;border-radius:50%;overflow:hidden;box-shadow:0px 12px 10px 0px #2a51e4;
	}
	.ding_bgimg>div>img{width:100%;}
	/*-- 顶部头像 --*/
	/*-- 底部内容 --*/
	.dibu_cont{padding:30px;}
	.dibu_cont>ul>li{border-bottom:1px solid #f0f0f0;padding:20px 0 10px;}
	.dibu_cont>ul>li>div{float:left;width:30px;height:30px;background:url(__HOME__/img/dlzc_tubiao.png) no-repeat;background-size:90px 90px;filter:grayscale(100%);transition:.2s;}
	.dibu_cont>ul>li>input{float:left;display:block;border:none;height:30px;line-height:30px;text-indent:10px;width:calc(100% - 30px);outline:none;}
	
	.dibu_cont>button{
		width:224px;height:44px;border-radius:22px;border:none;display:block;line-height:44px;font-size:18px;color:#fff;margin:30px auto 10px;outline:none;
		background-image: -moz-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
		background-image: -webkit-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
		background-image: -ms-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
	}
	
	.dibu_cont>div{color:#477bff;font-size:14px;text-align:center;width:70px;margin:0 auto;}
		
		/*验证码*/
	.yazheng>input{width:calc(100% - 130px)!important;}
	.yazheng>#hq_yzm{float:left;width:89px;border-left:1px solid #999;color:#999;background:none;line-height:30px;text-align:center;font-size:14px;}
		/*验证码*/
	/*-- 底部内容 --*/
</style>
</head>

<body>
	<!-- 顶部头像 -->
	<div class="ding_bgimg">
		<img src="__HOME__/img/dl_topimg.png" alt="">
		<div><img src="__HOME__/img/touxiang.png" alt=""></div>
	</div>
	<!-- 顶部头像 -->
	<!-- 底部内容 -->
	<form name="register" method="post" action="{:url('register')}">
	<div class="dibu_cont">
		<ul>
			<li>
				<div style="background-position-Y:-30px"></div>
				<input type="text" placeholder="输入账号" name="username" id="account">
				<h6 class="clearfix"></h6>
			</li>
			<li>
				<div style="background-position-X:-30px"></div>
				<input type="password" placeholder="输入密码" name="password">
				<h6 class="clearfix"></h6>
			</li>
			<li>
				<div></div>
				<input type="text" placeholder="输入手机号" name="mobile" oninput="this.value= value.replace(/\D/g,'')">
				<h6 class="clearfix"></h6>
			</li>
			<li class="yazheng">
				<div style="background-position-X:-60px"></div>
				<input type="text" placeholder="输入验证码" id="code">
				<div id="hq_yzm">获取验证码</div>
				<h6 class="clearfix"></h6>
			</li>
		</ul>
		<button>注册</button>
		<div onClick="location.href='{:url('index')}'">立即登录</div>
	</div>
	</form>
	<!-- 底部内容 -->

</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>

<script>
	/*表单验证*/
	var acc,pwd,phone,code,recode='';

	document.register.reset();
	
(function(){

	$('form').submit(function(){

		acc = register.username.value;

		if(acc == ''){

			layer.open({ content: '请输入账号' ,skin: 'msg' ,time: 2});


			_focus('username');
			return false;
		}
		else if(acc.length <6 || acc.length >18){

			layer.open({ content: '账号长度为6-18个字符' ,skin: 'msg' ,time: 2});

			_focus('username');

			return false;
		}

		pwd = register.password.value;

	    if(pwd == ''){

			layer.open({ content: '请输入密码' ,skin: 'msg' ,time: 2});
			
			_focus('password');
			return false;
		}else if(pwd.length <6){

			layer.open({ content: '密码长度为不能少于6个字符' ,skin: 'msg' ,time: 2});
			_focus('password');
			return false;
		}

		phone = register.mobile.value;

		if(phone == ''){

			layer.open({ content: '请输入手机号' ,skin: 'msg' ,time: 2});

			return false;
		}else if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(phone))){

			layer.open({ content: '请输入正确的手机号' ,skin: 'msg' ,time: 2});

			$('input[name="mobile"]').val('');
			return false;
		}

		if(acc && pwd && phone){

			code = document.getElementById('code').value;
			if($('#hq_yzm').text() == '获取验证码'){

				layer.open({ content: '请先获取验证码' ,skin: 'msg' ,time: 2});

				return false;
			}

			if(parseInt(code) !== parseInt(recode)){

				layer.open({ content: '验证码错误' ,skin: 'msg' ,time: 2});

				return false;
			}else{
				layer.open({ content: '注册成功' ,skin: 'msg' ,time: 2});
				return true;
			}
		}else{

			layer.open({ content: '请完善信息' ,skin: 'msg' ,time: 2});

			return false;
		}


		return false;
	})
	

	function _focus(obj){

		$('input[name='+obj+']').focus();
	}
	/*表单验证*/
	/*短信验证码*/
})();
	






	/*知信验证码*/
	$(".dibu_cont>ul>li>input").focus(function(){
		$(this).siblings("div").css("filter","grayscale(0)");
	})
	$(".dibu_cont>ul>li>input").blur(function(){
		$(this).siblings("div").css("filter","grayscale(100%)");
	})
	
	/* 读秒 */
	$("#hq_yzm").click(function(){
		/*me*/
		phone = register.mobile.value;
		if(!phone) return false;

		$.post('/index/login/recode',{code:code},function(msg){

			  recode = msg;
		});
		/*me*/
		var aa = $(this).text();
		if(aa === "获取验证码"){
			$(this).text("还剩60s");
			dao_js();
		}
	})
	function dao_js(){
		var a = 60;
		var d_t = setInterval(function(){
			a--;
			if(a >= 0){
				var d = "还剩" + a + "s"
				$("#hq_yzm").text(d);
			}else{
				clearInterval(d_t);
				$("#hq_yzm").text("获取验证码")
			}
		},1000)
	}
	/* 读秒 */
</script>
<script src="__HOME__/js/layer.js"></script>
</html>
